/**
 * Created by Juvid on 2017/3/24.
 */
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableHighlight,
    Image,
    Navigator,
    NavigatorIOS
} from 'react-native';
// import {
//     StackNavigator,
// } from 'react-navigation';

export default class RnWidget extends React.Component {

    render() {
        let defaultName = 'firstPageName';
        let defaultComponent = FirstPageComponent;
        return (
          /*<Navigator
                styles = {styles.container}
                initialRoute = {{name: defaultName,component : defaultComponent}}
                configureScene = {
                    (route)=>{
                        return Navigator.SceneConfigs.FloatFromRight
                    }
                }
                renderScene = {(route,navigator)=>{
                    let Component = route.component;
                    return <Component{...route.params} navigator={navigator}/>
                }}
            />*/
           <NavigatorIOS
                initialRoute={{
                    component: FirstPageComponent,
                    title: '第一个',
                }}
                style={{flex: 1}}
            />
        )
    }
    static navigationOptions = {
        title: 'Welcome',
    };
    /*static navigationOptions = {
        title: 'Welcome',
    };
    render() {
        return <Text>Hello, Navigation!</Text>;
    }*/
}

//第一个界面
class FirstPageComponent extends Component{
    constructor(props){
        super(props);
        this.state={
            title :"第一个"
        }
    }
    clickJump(){
        //因为Navigator <Component {...route.params} navigator={navigator} />传入了navigator 所以这里能取到navigator
        const{navigator} = this.props;
        let that = this;
        if(navigator){
            navigator.push({
                name : "SecondPageComponent",
                component : SecondPageComponent,
                passProps :{
                    title:this.state.title,
                    id:123,
                    getUser:function(user){
                        that.setState({
                            user:user
                        })
                    }
                },
                title: '第二个',
                params :{
                    title:this.state.title,
                    id:123,
                    getUser:function(user){
                        that.setState({
                            user:user
                        })
                    }
                }
            })
        }
    }
    render(){
        return(
            <View style={styles.container}>
                <Text>我是第一个界面</Text>
                <TouchableHighlight
                    underlayColor="rgb(181, 136, 254)"
                    activeOpacity={0.5}
                    style={{ borderRadius: 8,padding: 8,marginTop:5,backgroundColor:"#0588fe"}}
                    onPress={this.clickJump.bind(this)}
                >
                    <Text>点击进入第二个界面</Text>
                </TouchableHighlight>
                <Text>第二个界面返回：{this.state.user}</Text>
            </View>
        )
    }
}

//第二个界面
class SecondPageComponent extends Component{
    constructor(props){
        super(props);
        this.state={
            id:null,
        }
    }

    clickJump(){
        if(this.props.getUser){
            this.props.getUser("大海")
        }
        const{navigator} = this.props;
        if(navigator){
            //把当前页面pop掉 回到上一个页面
            navigator.pop();
        }
    }

    componentDidMount(){
        this.setState({
            title:this.props.title,
            id:this.props.id
        })
    }
    render(){
        return(
            <View style={styles.container}>
                <Text>我是第二个界面</Text>

                <TouchableHighlight
                    underlayColor="rgb(181, 136, 254)"
                    activeOpacity={0.5}
                    style={{ borderRadius: 8,padding: 8,marginTop:5,backgroundColor:"#0588fe"}}
                    onPress={this.clickJump.bind(this)}
                >
                    <Text>点击返回第一个界面</Text>
                </TouchableHighlight>

                <Text>第一个界面传入：{this.state.title}</Text>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#ffffff',
    },

});
// AppRegistry.registerComponent('RnWidget', () => RnWidget);